<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        list-style: none;
      }
      .box1 {
        display: flex;
        width: 1000px;
        height: 200px;
        overflow: hidden;
        margin: 50px auto 0;
        background-color: darkgoldenrod;
      }

      .box1:hover .img-list-start {
        animation-play-state: paused;
      }

      .img-list-start {
        display: flex;
        transform: translateX(0);
        flex: 0 0 100%;
        height: 100%;
        overflow: hidden;
        background-color: coral;
        animation: imagesLoopStart 5s linear infinite;
      }
      .img-list-end {
        display: flex;
        flex: 0 0 100%;
        height: 100%;
        overflow: hidden;
        background-color: coral;
        animation: imagesLoopStart 5s linear infinite;
      }
      .img-item {
        width: 200px;
        height: 200px;
        background-color: darkcyan;
        font-size: 40px;
      }
      @keyframes imagesLoopStart {
        0% {
          transform: translateX(0%);
        }
        100% {
          transform: translateX(-100%);
        }
      }
    </style>
  </head>
  <body>
    <div class="box1">
      <ul class="img-list-start">
        <li class="img-item">1</li>
        <li class="img-item">2</li>
        <li class="img-item">3</li>
        <li class="img-item">4</li>
        <li class="img-item">5</li>
      </ul>
      <ul class="img-list-end">
        <li class="img-item">1</li>
        <li class="img-item">2</li>
        <li class="img-item">3</li>
        <li class="img-item">4</li>
        <li class="img-item">5</li>
      </ul>
    </div>

    <script type="module">
      const obj = {
        a: null,
        b: undefined,
        d: [{ id: '1', name: '李岚清' }],
        c() {
          console.log(this.a);
        },
        e: new Date(),
      };
      const obj1 = JSON.stringify(obj);
      const obj2 = JSON.parse(obj1);
      // undefined  new Date() funtion NaN 在序列化中默认都是有问题
    </script>
  </body>
</html>
